<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表单验证的插件</title>
    <style>
        label.error {
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
  <form action="xxx" id="table1">
    <!--用户名和密码的验证规则写在标签里面，年龄的验证规则写在了方法validate里面      -->
    <p>用户名：<input name="username" type="text" required minlength="2"></p>
    <p>年龄：<input name="age" type="text" ></p>
    <p>密码：<input id="pw1" name="pw1" type="password" required minlength="2" maxlength="8"></p>
    <p>确认密码：<input id="pw2" name="pw2" type="password" equalTo="#pw1"></p>
    <p><input type="submit" value="注册"></p>
  </form>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>

    $(function () {
        /*
        * 这种验证方式是声明式验证
        * */
        // $('#table1').validate()
        $("#table1").validate({
            rules:{
              age: {
                  min: 18,
                  required: true
              }

            },
            messages:{
                username:{
                    required:'请输入字符！',
                    minlength: '名字最短长度是2位字符！'
                },
                age:{
                    min: '年龄最小是18岁！',
                    required: '你必须输入一个年龄！'
                },
                pw2:{
                    equalTo:'两次密码必须相同！'
                }
            }
        });
    })
</script>

</body>
</html>